{% extends 'blog_base.html' %} 

{% block title %}详情{% endblock %} 

{% block head %}
  <link rel="stylesheet" href="{% static 'highlight/styles/github-dark.min.css' %}">
  <script src="{% static 'highlight/highlight.min.js' %}"></script>
{% endblock %}

{% block main %}
<div>
  <div style="margin-bottom: 10px;">
    <button class="btn btn-success" onclick="window.location.href='/myblog/index'"><&nbsp;返回</button>
  </div>
  <h1>{{blog.title}}</h1>
  <hr />
  <div style="display: flex;justify-content: space-between;">
    <div class="mt-2">
      <img
        src="{% static 'images/avat.jpg' %}"
        class="rounded-circle"
        width="30"
        height="30"
        alt=""
      />
      <span class="ms-2">{{blog.author.username}}</span>
      <span class="ms-2">于</span>
      <span class="ms-2">{{blog.pub_time|date:"Y年m月d日 h时i分s秒"}}</span>发布
    </div>
    <div style="text-align: end;color: rgb(253, 99, 4);font-size: 18px;font-weight: bold;margin-right: 20px;">{{blog.category.name}}</div>
  </div>
  <hr />
  <div class="py-2">
    {{blog.content|safe}}
  </div>
  <hr />
  <div class="mt-2">
    <h3>评论（{{blog.comments.all|length}}）</h3>
    <form action="{% url 'myblog:pub_comment' %}" method="post">
      <!-- 防止csrf攻击 -->
      {% csrf_token %}
      <input type="hidden" name="blog_id" value="{{blog.id}}" />
      <div class="mt-2">
        <input type="text" class="form-control" placeholder="请输入评论" name="content" required />
      </div>
      <div class="text-end mt-2">
        <button type="submit" class="btn btn-primary">评论</button>
      </div>
    </form>
  </div>
  <div class="mt-2">
    <ul class="list-group list-group-flush">
      {% for comment in blog.comments.all %}
        <li class="list-group-item mt-2">
          <div class="d-flex justify-content-between text-body-secondary">
            <div class="user-info">
              <img
                src="{% static 'images/avat.jpg' %}"
                class="rounded-circle"
                width="40"
                height="40"
                alt=""
              />
              <span class="ms-2">{{comment.author.username}}</span>
            </div>
            <div class="create-time" style="line-height: 40px">
              {{comment.pub_time|date:"Y年m月d日 h时i分s秒"}}
            </div>
          </div>
          <div class="mt-2">{{comment.content}}</div>
        </li>
      {% endfor %}
    </ul>
  </div>
</div>
<!-- 最后写保证前面的html内容被提前加载 -->
 <script>
  hljs.highlightAll();
 </script>
{% endblock %}
